<%@ page import="com.tchy.cloud.entity.AOfficialWhEntity" %>
<%@ page import="org.jeecgframework.core.util.StringUtil" %>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@include file="/context/mytags.jsp" %>
<!DOCTYPE html>
<html>
<head>
    <title>修改正式文章</title>
    <t:base type="jquery,easyui,tools,DatePicker,ckeditor"></t:base>
</head>
<style type="text/css">

    #bottomnav {position: absolute; bottom: 0px; left: 0; right: 0; height: 30px; line-height: 30px; text-align: center;}
    #bottomnav .btn {display: inline-block;padding: 0 20px;margin: 0 10px; margin-right: 8px; height: 30px;line-height: 30px;background: #1964a0;color: #fff;}
    #bottomnav .fr{ float: right;}
    #bottomnav .fl{ float: left;}
    #bottomnav .grey{ background: #CDCDCD;  color: #1964a0;}
    #bottomnav .green{ background: #23b42d;  color: #fff;}

</style>


<script type="text/javascript" src="${webRoot}/plug-in/ajaxfileupload/ajaxfileupload.js"></script>
<script type="text/javascript" charset="utf-8" src="${webRoot}/plug-in/ueditor1_4_3-utf8-jsp/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="${webRoot}/plug-in/ueditor1_4_3-utf8-jsp/ueditor.all.min.js"> </script>
<!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败-->
<!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->
<script type="text/javascript" charset="utf-8" src="${webRoot}/plug-in/ueditor1_4_3-utf8-jsp/lang/zh-cn/zh-cn.js"></script>
<script type="text/javascript">


    //实例化编辑器
    //建议使用工厂方法getEditor创建和引用编辑器实例，如果在某个闭包下引用该编辑器，直接调用UE.getEditor('editor')就能拿到相关的实例
    var ue = UE.getEditor('editor');
    //加载完富文本后放入内容
    ue.ready( function( editor ) {
        var html = $("#content").val();

        html = html.replace(/src="*.?upload/g, 'src="/xinxun_cloud/upload');

        ue.setContent(html);
    });
    //添加内容改变事件,编辑器内容改变后把内容赋值到隐藏表单
    ue.addListener( 'contentChange', function( editor ) {
        $("#content").val(ue.getContent());
    } );

    /**
     * 提交之前触发
     */
    function f_goodsDesc(){

        var desc = ue.getContent();

        //替换图片根路径
        //desc = desc.replace(/src=\"\/yw_cloud\/upload/g,'src="upload');

        $("#content").val(desc);

    }

    $(function(){

//        f_formatShow();
        f_isCarousel();

        $("#format").change(f_formatShow);
        $("input[name=isCarousel]").click(f_isCarousel);


        $("#keyword").on("keyup", function (e) {
//            console.log(e.keyCode);
            if (e.keyCode == 188) {
                //to-do when click Enter Key

                var s = $("#keyword").val().replace("，",",");

                $("#keyword").val(s);
            }
        });


        $('#cc').combotree({
            url : 'columnsController.do?setPFunction&selfId=',
            width: 280,
            checkbox: true,
            multiple:true,
            onlyLeafCheck:true,
            onLoadSuccess: function(node, data){

                //默认展开所有
                $('#cc').combotree('tree').tree('expandAll');

            },
            onSelect : function(node) {

                var pId = "";
                if(node.id != ""){
                    pId = node.id;
                }

//                $("#pId").val(pId);

            },
            onChange : function(node) {

                $("#pId").val($('#cc').combotree('getValues'));

            }
        });

//        if($("#id").val() != "") {
//            $('#cc').combotree('disable');
//        }


        if($("#cc").val() == ""){
            $('#cc').combotree('setValue', '');
        }else{

            <%--$('#cc').combotree('setValue', '[${columnIds}]');--%>
        }

        var vas = eval("${columnIds}");

        if(vas != "" && vas != undefined){

            $("#cc").combotree("setValues", vas);
        }

    })


    function f_isCarousel(){

        if($("input[name=isCarousel]:checked").val() == 1){
            $(".formatCarousel").show();
            $(".format1").hide();
            $(".format2").hide();
        }else{
            $(".formatCarousel").hide();
            f_formatShow()

        }


    }

    //板式控制
    function f_formatShow(){
        var format = $("#format").val();

        if(format == "101" || format == "103"){//单图模式 //103三图板式

            $(".format1").show();
            $(".format2").hide();


        }else if(format == "102"){//三图板式

            $(".format1").hide()
            $(".format2").show();

        }else{//空值

            $(".format1").hide();
            $(".format2").hide();


        }


    }


    ////////////////自定义实现方式
    function f_callback(data){

        var type = $("#callbackType").val();

        var win = frameElement.api.opener;
        if(type == "close"){

            frameElement.api.close();
            win.reloadTable();
        }else if(type == "preview"){

            var fname=window.name;//frame 名字
            var isBoo = win.f_optButton(fname,"预览");
            if(isBoo == false){
                alert("权限不够！");
            }


        }
    }

    //关闭当前窗口
    function f_closeWindow(){

        frameElement.api.close();
    }

    function f_submit(){

        $("#btn_sub").click();

    }
    function f_subPreview(){

        $("#callbackType").val("preview");
        $("#btn_sub").click();


    }



</script>
<%
    String defImgUrl = "upload/none.jpg";
    AOfficialWhEntity officialWh = (AOfficialWhEntity)request.getAttribute("officialWh");

    if(officialWh == null){
        officialWh = new AOfficialWhEntity();
    }

    if(officialWh != null){

        if(StringUtil.isEmpty(officialWh.getArticleImg())){

            officialWh.setArticleImg(defImgUrl);
        }
        if(StringUtil.isEmpty(officialWh.getArticleThumb())){

            officialWh.setArticleThumb(defImgUrl);
        }
        if(StringUtil.isEmpty(officialWh.getOriginalImg())){

            officialWh.setOriginalImg(defImgUrl);
        }
        if(StringUtil.isEmpty(officialWh.getPic1())){

            officialWh.setPic1(defImgUrl);
        }
        if(StringUtil.isEmpty(officialWh.getPic2())){

            officialWh.setPic2(defImgUrl);
        }
        if(StringUtil.isEmpty(officialWh.getPic3())){

            officialWh.setPic3(defImgUrl);
        }

        request.setAttribute("officialWh",officialWh);
    }
%>
<body  scroll="no" >
<t:formvalid  refresh="false" isCloseWindow="false" isCurCallback="true" callback="f_callback" formid="addformobj" dialog="true" usePlugin="password" layout="table" action="officialWhController.do?save" beforeSubmit="f_goodsDesc()">

<div style="position: absolute; bottom:50px; top:0; left:0; width:100%;overflow-y: auto; ">
    <input id="articleId" name="articleId" type="hidden" value="${officialWh.articleId}">
    <input id="callbackType" name="callbackType" type="hidden" value="close">
    <table  cellpadding="0" cellspacing="1" class="formtable">

        <tr>
            <td align="right" style="width: 100px;">
                <label class="Validform_label">
                    文章标题:
                </label>
            </td>
            <td class="value" style="width: 300px;">
                <input class="inputxt" id="title" type="text"
                       value="${fn:escapeXml(officialWh.title)}"  name="title" datatype='*'>
                <span class="Validform_checktip"></span>
            </td>

            <td align="left" style="width: 100px;">
                <label class="Validform_label">
                    作者名称:
                </label>
            </td>
            <td class="value" style="width: 300px;">
                <input class="inputxt" id="consumerName"
                       value="${fn:escapeXml(officialWh.consumerName == null ? '心询网':officialWh.consumerName)}"  name="consumerName" >
                <span class="Validform_checktip"></span>
            </td>

        </tr>

        <tr>
            <td align="right">
                <label class="Validform_label">
                    版式:
                </label>
            </td>
            <td class="value">
                <t:dictSelect field="format"  type="select" typeGroupCode="formatType" defaultVal="${officialWh.format}"
                              hasLabel="false" extendJson="{datatype='*'}" id="format" >
                </t:dictSelect>
                <span class="Validform_checktip"></span>
            </td>
            <td align="left">
                <label class="Validform_label">
                    关键字:
                </label>
            </td>
            <td class="value" >
                <input class="inputxt" id="keyword"
                       value="${officialWh.keyword}"  name="keyword" >
                <span class="Validform_checktip">多个关键字以逗号分割</span>
            </td>

        </tr>
        <tr>

            <td align="right">
                <label class="Validform_label">
                    文章类型:
                </label>
            </td>
            <td class="value">
                <t:dictSelect field="articleType"  type="select" typeGroupCode="articleType" defaultVal="${officialWh.articleType}"
                              hasLabel="false" extendJson="{datatype='*'}" id="articleType" >
                </t:dictSelect>
                <span class="Validform_checktip"></span>
            </td>

            <td align="left">
                <label class="Validform_label">
                    是否轮播:
                </label>
            </td>
            <td class="value">
                <t:dictSelect field="isCarousel"  type="radio" typeGroupCode="isno" defaultVal="${officialWh.isCarousel == null ? 0 : 1}"
                              hasLabel="false" extendJson="{datatype='*'}" id="isCarousel" >
                </t:dictSelect>
                <span class="Validform_checktip"></span>
            </td>
        </tr>
        <tr>
            <td align="right">
                <label class="Validform_label">
                    分类栏目:
                </label>
            </td>
            <td class="value" colspan="3">
                <input id="cc" name="cc" value="">
                <input type="hidden" id="pId" name="columnIds" value="${columnIds}"
                       datatype='*' nullmsg="请选择分类栏目">
                <span class="Validform_checktip">请选择分类栏目</span>
            </td>


        </tr>
        <tr class="format1">
            <td align="right">
                <label class="Validform_label">
                    文章主图:
                </label>
            </td>
            <td class="value"  colspan="3">
                <img id="originalImgImg" src="${officialWh.originalImg}" style="width: 100px;height: 100px;" alt="预览" title="预览">

                <input type="button" name="" onclick="javascript:$(this).next().trigger('click')" class="uploadify-button" value="上传" />
                <input  type="file" style="display: none;" name="file" id="fulAchievements3" onchange="f_img_upload('fulAchievements3','originalImgImg','originalImg')" />
                <input type="hidden" name="originalImg" id="originalImg" value="${officialWh.originalImg}" />
                <input type="hidden" name="articleThumb" id="articleThumb" value="${officialWh.articleThumb}" />
                <input type="hidden" name="articleImg" id="articleImg" value="${officialWh.articleImg}" />
                <span class="Validform_checktip">最佳尺寸320*320，不低于200*200</span>
            </td>


        </tr>
        <tr class="format2">
            <td align="right">
                <label class="Validform_label">
                    图一:
                </label>
            </td>
            <td class="value">
                <img id="pic1Img" src="${officialWh.pic1}" style="width: 100px;height: 100px;" alt="预览" title="预览">

                <input type="button" name="" onclick="javascript:$(this).next().trigger('click')" class="uploadify-button" value="上传" />
                <input  type="file" style="display: none;" name="file" id="fulAchievements4" onchange="f_file_upload('fulAchievements4','pic1Img','pic1',1)" />
                <input type="hidden" name="pic1" id="pic1" value="${officialWh.pic1}" />
                <span class="Validform_checktip"></span>
            </td>
            <td align="left">
                <label class="Validform_label">
                    图二:
                </label>
            </td>
            <td class="value">
                <img id="pic2Img" src="${officialWh.pic2}" style="width: 100px;height: 100px;" alt="预览" title="预览">

                <input type="button" name="" onclick="javascript:$(this).next().trigger('click')" class="uploadify-button" value="上传" />
                <input  type="file" style="display: none;" name="file" id="fulAchievements5" onchange="f_file_upload('fulAchievements5','pic2Img','pic2',2)" />
                <input type="hidden" name="pic2" id="pic2" value="${officialWh.pic2}" />
                <span class="Validform_checktip"></span>
            </td>
        </tr>

        <tr class="format2">

            <td align="right">
                <label class="Validform_label">
                    图三:
                </label>
            </td>
            <td class="value" colspan="3">
                <img id="pic3Img" src="${officialWh.pic3}" style="width: 100px;height: 100px;" alt="预览" title="预览">

                <input type="button" name="" onclick="javascript:$(this).next().trigger('click')" class="uploadify-button" value="上传" />
                <input  type="file" style="display: none;" name="file" id="fulAchievements6" onchange="f_file_upload('fulAchievements6','pic3Img','pic3',3)" />
                <input type="hidden" name="pic3" id="pic3" value="${officialWh.pic3}" />
                <span class="Validform_checktip">最佳尺寸320*320，不低于200*200</span>
            </td>

        </tr>
        <tr class="formatCarousel">
            <td align="right">
                <label class="Validform_label">
                    轮播图:
                </label>
            </td>
            <td class="value" colspan="3">
                <img id="picCarouselImg" src="${officialWh.picCarousel}" style="width: 200px;height: 100px;" alt="预览" title="预览">

                <input type="button" name="" onclick="javascript:$(this).next().trigger('click')" class="uploadify-button" value="上传" />
                <input  type="file" style="display: none;" name="file" id="fulAchievements7" onchange="f_picCarousel_upload('fulAchievements7','picCarouselImg','picCarousel')" />
                <input type="hidden" name="picCarousel" id="picCarousel" value="${officialWh.picCarousel}" />
                <span class="Validform_checktip">建议图片尺寸1080*510</span>
            </td>
        </tr>
        <tr>
            <td align="right">
                <label class="Validform_label">
                    文章简介:
                </label>
            </td>
            <td class="value" colspan="3">

                <textarea id="intro" style="width:595px; height:60px;" name="intro" >${officialWh.intro}</textarea>
            </td>
        </tr>
        <tr>
            <td align="right">
                <label class="Validform_label">
                    文章内容:
                </label>
            </td>
            <td class="value" colspan="3">

                <script id="editor" type="text/plain" style="width:100%; height:300px;"></script>
                <textarea style="display: none;"  id="content" name="content" >${officialWh.content}</textarea>
            </td>
        </tr>


    </table>
    </div>
    <c:if test="${officialWh.articleId != null }">

    <div id="bottomnav">
        <span class="fl">
        	<a class="btn" href="javascript:void(0);" onclick="f_subPreview()">保存并预览</a>
        	<%--<a class="btn green" href="javascript:void(0);" onclick="">保存并审核</a>--%>
		</span>
        <a class="btn fr grey" href="javascript:void(0);" onclick="f_submit()">保存并关闭</a>

    </div>
    </c:if>
</t:formvalid>



</body>
<script type="text/javascript">
    //Ajax需要剪裁图片上传
    function f_img_upload(fileInputId,imgId,valueId){

        var path = $("#"+fileInputId).val();

        var pos1 = path.lastIndexOf("\\");
        var pos2 = path.lastIndexOf(".");
        var pos = path.substring(pos1 + 1, pos2);

        var fileName = path.substring(pos1+1,pos2);

        var str = $("#"+fileInputId).val().split(".");
        var result = path.substring(pos2 + 1,path.length );

        var rars = ".rar.zip.7z.cab.RAR.ZIP.7Z.CAB";

        var imgs = ".bmp.jpg.dib.jpeg.png.jfif.jpe.tif.tiff.gif.BMP.JPG.DIB.JPEG.PNG.JFIF.JPE.TIF.TIFF.GIF";

        //文件类型 false为压缩包
        var boo = false;

        //判断上传的是项目图片还是项目附件
        if(imgs.indexOf(result) > -1){
            boo = true;

        }else{

            alert(" 只能上传后缀为 .bmp.jpg.dib.jpeg.png.jfif.jpe.tif.tiff.gif 的图片！");
            $("#"+fileInputId).val("");
            return;
        }
        var format = $("#format").val();

        $.ajaxFileUpload({
            url: '${webRoot}/myFileUpload/uploadImageScale.do?desiRootFolder=article&newfileName=uuid&folderName='+format,
            secureuri: false,
            fileElementId: fileInputId,
            //dataType: 'json',
            success: function (data) {
                var data2 = data.split(",");
                //data = $.parseJSON(data);

                var url = data2[0].replace(" ","");
                fileName = data2[1].replace(" ","");
                var bigImgUrl = data2[2].replace(" ","");
                var zoomImgUrl = data2[3].replace(" ","");

                <%--$("#imgPath").val(url);--%>
                <%--cutImg("${webRoot}/", url, "addformobj", "img_path", 1);--%>

                $("#"+valueId).val(url);
                $("#articleImg").val(bigImgUrl);
                $("#articleThumb").val(zoomImgUrl);
                $("#"+imgId).attr("src","${webRoot}/" + url);
            },
            error:function(data){
                console.log("error");
                console.log(data);
            }
        });
    }

    //Ajax文件上传 轮播图上传
    function f_picCarousel_upload(fileInputId,imgId,valueId){
        _imgId = imgId;
        _valueId = valueId;
        //var result =/\.[^\.]+/.exec($("#fulAchievements").val());

        var path = $("#"+fileInputId).val();

        var pos1 = path.lastIndexOf("\\");
        var pos2 = path.lastIndexOf(".");
        var pos = path.substring(pos1 + 1, pos2);

        var fileName = path.substring(pos1+1,pos2);

        var str = $("#"+fileInputId).val().split(".");
        var result = path.substring(pos2 + 1,path.length );

        var imgs = ".bmp.jpg.dib.jpeg.png.jfif.jpe.tif.tiff.gif.BMP.JPG.DIB.JPEG.PNG.JFIF.JPE.TIF.TIFF.GIF";

        //文件类型 false为压缩包
        var boo = false;

        //判断上传的是项目图片还是项目附件
        if(imgs.indexOf(result) > -1){
            boo = true;

        }else{

            alert(" 只能上传后缀为 .bmp.jpg.dib.jpeg.png.jfif.jpe.tif.tiff.gif 的图片！");
            $("#"+fileInputId).val("");
            return;
        }

        $.ajaxFileUpload({
            url: '${webRoot}/myFileUpload/upload_resource_file.do',
            secureuri: false,
            fileElementId: fileInputId,
            //dataType: 'json',
            success: function (data) {
                //data = $.parseJSON(data);

                var data2 = data.split(",");

                var url = data2[0].replace(" ","");
                fileName = data2[1].replace(" ","");

                <%--$("#imgPath").val(url);--%>
                <%--cutImg("${webRoot}/", url, "addformobj", "img_path", 1);--%>

                $("#"+valueId).val(url);
                $("#"+imgId).attr("src","${webRoot}/" + url);
            },
            error:function(data){
                console.log("error");
                console.log(data);
            }
        });
    }

    //Ajax文件上传
    function f_file_upload(fileInputId,imgId,valueId,seqNum){
        _imgId = imgId;
        _valueId = valueId;
        //var result =/\.[^\.]+/.exec($("#fulAchievements").val());

        var path = $("#"+fileInputId).val();

        var pos1 = path.lastIndexOf("\\");
        var pos2 = path.lastIndexOf(".");
        var pos = path.substring(pos1 + 1, pos2);

        var fileName = path.substring(pos1+1,pos2);

        var str = $("#"+fileInputId).val().split(".");
        var result = path.substring(pos2 + 1,path.length );

        var imgs = ".bmp.jpg.dib.jpeg.png.jfif.jpe.tif.tiff.gif.BMP.JPG.DIB.JPEG.PNG.JFIF.JPE.TIF.TIFF.GIF";

        //文件类型 false为压缩包
        var boo = false;

        //判断上传的是项目图片还是项目附件
        if(imgs.indexOf(result) > -1){
            boo = true;
        }else{
            alert(" 只能上传后缀为 .bmp.jpg.dib.jpeg.png.jfif.jpe.tif.tiff.gif 的图片！");
            $("#"+fileInputId).val("");
            return;
        }

        var format = $("#format").val();

        $.ajaxFileUpload({
            url: '${webRoot}/myFileUpload/uploadImageScaleThumb.do?desiRootFolder=article&newfileName=uuid&folderName='+format+"&seqNum="+seqNum,
            secureuri: false,
            fileElementId: fileInputId,
            //dataType: 'json',
            success: function (data) {
                //data = $.parseJSON(data);

                var data2 = data.split(",");

                var url = data2[0].replace(" ","");
                fileName = data2[1].replace(" ","");

                <%--$("#imgPath").val(url);--%>
                <%--cutImg("${webRoot}/", url, "addformobj", "img_path", 1);--%>

                $("#"+valueId).val(url);
                $("#"+imgId).attr("src","${webRoot}/" + url);
            },
            error:function(data){
                console.log("error");
                console.log(data);
            }
        });
    }


</script>
</html>